<!-- components/CartPopup.vue -->
<script setup>
import { useCartStore } from '@/stores/cart'
// import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const cartStore = useCartStore()

// 处理图片路径
const getImage = (item) => {
  if (Array.isArray(item.picture) && item.picture.length > 0) {
    return item.picture[0]
  }
  return item.picture || '/src/assets/default-product.png'
}

// 跳转购物车页面
const goCart = () => {
  router.push('/cartlist')
}

// 初始化加载购物车数据
cartStore.loadCartData()
</script>

<template>
  <div class="cart">
    <a class="curr" href="javascript:;">
      <i class="iconfont icon-cart"></i>
      <em>{{ cartStore.allCount }}</em>
    </a>
    <div class="layer">
      <div class="list">
        <div v-if="cartStore.cartList.length === 0" class="empty">
          <el-empty description="购物车空空如也~" />
        </div>
        <div class="item" v-for="item in cartStore.cartList" :key="item.skuId">
          <RouterLink :to="`/product/${item.id}`">
            <img :src="getImage(item)" :alt="item.name" />
            <div class="center">
              <p class="name ellipsis-2">{{ item.name }}</p>
              <p class="attr ellipsis">{{ item.attrsText }}</p>
            </div>
            <div class="right">
              <p class="price">&yen;{{ item.price.toFixed(2) }}</p>
              <p class="count">x{{ item.count }}</p>
            </div>
          </RouterLink>
          <i
              class="iconfont icon-close-new"
              @click="cartStore.deleteCart(item.skuId)"
          ></i>
        </div>
      </div>
      <div class="foot" v-if="cartStore.cartList.length > 0">
        <div class="total">
          <p>共 {{ cartStore.allCount }} 件商品</p>
          <p>&yen; {{ cartStore.allPrice.toFixed(2) }}</p>
        </div>
        <el-button type="primary" size="large" @click="goCart">
          去购物车结算
        </el-button>
      </div>
    </div>
  </div>
</template>

<!-- 保持原来的样式不变 -->